<!-- 
	This is the tables page, it uses the dashboard layout in: 
	"./layouts/Dashboard.vue" .
 -->

<template>
	<div>
		<a-row :gutter="24" type="flex">

			<a-col :span="24" class="mb-24">
				<a-card :bordered="false" class="header-solid h-full" :bodyStyle="{padding: 0,}">
					<template #title>
						<a-row type="flex" align="middle">
							<a-col :span="24" :md="12">
								<h5 class="font-semibold m-0">Tenant Table</h5>
							</a-col>
							<a-col :span="24" :md="12"
								style="display: flex; align-items: center; justify-content: flex-end">
								
								<a-row :gutter="24" type="middle">
									<a-col :span="24" :md="12"
										style="display: flex; align-items: center; justify-content: flex-end">
										<a-button type="primary" size="small" @click="">
										      新增
										    </a-button>
										</a-col>
									<a-col :span="24" :md="12"
										style="display: flex; align-items: center; justify-content: flex-end">
										<a-radio-group v-model="tenantHeaderBtns" size="small" @change="getTenantTable()">
											<a-radio-button :value="1">启用</a-radio-button>
											<a-radio-button :value="0">禁用</a-radio-button>
										</a-radio-group>
										</a-col>
								</a-row>
								
								
							</a-col>
						</a-row>
					</template>
					<a-table :columns="tableColumns" :data-source="tableData" :pagination="false">

						<template slot="tenant" slot-scope="tenant">
							<div class="table-avatar-info">
								<!-- <a-avatar shape="square" :src="tenant.avatar" /> -->
								<div class="avatar-info">
									<h6>{{ tenant.name }}</h6>
									<p>{{ tenant.code }}</p>
								</div>
							</div>
						</template>

						<template slot="func" slot-scope="func">
							<div class="author-info">
								<h6 class="m-0">{{ func.phone }}</h6>
								<p class="m-0 font-regular text-muted">{{ func.address }}</p>
							</div>
						</template>

						<template slot="status" slot-scope="status">
							<a-tag class="tag-status" :class="status ? 'ant-tag-primary' : 'ant-tag-muted'">
								{{ status ? "启用" : "禁用" }}
							</a-tag>
						</template>

						<template slot="editBtn" slot-scope="row">
							<a-button type="link" :data-id="row.id" class="btn-edit" @click="openSaveForm(row.id)">
								编辑
							</a-button>
							<a-button type="link" :data-id="row.id" class="btn-del">
								删除
							</a-button>
						</template>

					</a-table>
				</a-card>
				

			</a-col>
			
			<a-col :span="24" class="mb-24">
				<a-pagination
				      :total="tableCount"
				      :show-total="total => `共 ${total} 条`"
				      :page-size="pageSize"
				      v-model:current="pageNo"
				    />
			</a-col>

		</a-row>
		
		<!-- 弹窗 -->
		
		<a-modal
		      title="新增租户"
		      v-model:visible="addVisible"
		      :confirm-loading="confirmLoading"
		      @ok="addFormOk()"
		    >
			<a-form :model="addFormData" :label-col="4" :wrapper-col="14">
				<a-form-item label="租户名称">
				      <a-input v-model:value="addFormData.tenantName" />
				</a-form-item>
				<a-form-item label="租户编码">
				      <a-input v-model:value="addFormData.tenantCode" />
				</a-form-item>
				<a-form-item label="租户管理员账号">
				      <a-input v-model:value="addFormData.rootAdminAccount" />
				</a-form-item>
				<a-form-item label="租户管理员密码">
				      <a-input v-model:value="addFormData.rootPass" />
				</a-form-item>
				<a-form-item label="租户联系方式">
				      <a-input v-model:value="addFormData.phone" />
				</a-form-item>
				<a-form-item label="租户联系地址">
				      <a-input v-model:value="addFormData.address" />
				</a-form-item>
			</a-form>
		</a-modal>
		
		<a-modal
		      title="编辑租户"
		      v-model:visible="saveVisible"
		      :confirm-loading="confirmLoading"
		      @ok="saveTenantInfo()"
		    >
			<a-form :model="saveFormData" :label-col="4" :wrapper-col="14">
				<a-form-item label="租户名称">
				      <a-input v-model:value="saveFormData.tenantName" />
				</a-form-item>
				<a-form-item label="租户联系方式">
				      <a-input v-model:value="saveFormData.phone" />
				</a-form-item>
				<a-form-item label="租户联系地址">
				      <a-input v-model:value="saveFormData.address" />
				</a-form-item>
				<a-form-item label="租户状态">
				      <a-switch v-model:checked="saveFormData.status" />
				</a-form-item>
			</a-form>
			</a-modal>
	</div>
</template>

<script>
	const tableColumns = [{
			title: 'TENANT NAME',
			dataIndex: 'tenant',
			scopedSlots: {
				customRender: 'tenant'
			},
		},
		{
			title: 'TENANT INFO',
			dataIndex: 'func',
			scopedSlots: {
				customRender: 'func'
			},
		},
		{
			title: 'TENANT STATUS',
			dataIndex: 'status',
			scopedSlots: {
				customRender: 'status'
			},
		},
		{
			title: '',
			scopedSlots: { customRender: 'editBtn' },
			width: 200,
		},
	]
		
	import { getTenantTable, getTenantById, saveTenantInfo } from "../api/tenant/tenant";
	export default ({
		data() {
			return {
				tableColumns: tableColumns,
				tableData: [],
				tenantHeaderBtns: 1,
				tableCount: 0,
				pageNo: 1,
				pageSize: 10,
				addVisible: false,
				addFormData: {
					tenantName: '',
					tenantCode: '',
					rootAdminAccount: '',
					rootPass: '',
					phone: '',
					address: '',
					status: true
				},
				
				saveVisible: false,
				saveFormData: {
					id: '',
					tenantName: '',
					phone: '',
					address: '',
					status: true
				},
				confirmLoading: false
			}
		},
		created() {
			this.getTenantTable();
		},
		
		methods: {
			getTenantTable() {
				const param = {
					status: this.tenantHeaderBtns,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				getTenantTable(param).then(resp => {
					console.log('getTenantTable', resp);
					this.tableData = resp.data.result
					this.tableCount = resp.data.count
				})
			},
			
			openAddForm() {
				this.addVisible = true
				this.addFormData = {}
			},
			
			openSaveForm(id) {
				getTenantById(id).then(resp => {
					console.log('user ', resp);
					this.saveVisible = true
					this.saveFormData = resp.data
				})
			},
			
			closeSaveForm() {
				this.saveVisible = false
				this.saveFormData = {}
			},
			
			saveTenantInfo() {
				const data = this.saveFormData
				saveTenantInfo(data).then(resp => {
					this.closeSaveForm()
					// 刷新列表
					this.getTenantTable()
				})
			},
			
			// 完成表单操作确定按钮
			addFormOk() {
				console.log('form ok');
			}
		}
	})
</script>

<style lang="scss">
</style>